<template>
  <div id="water" :style="size">
    <div id="watermain" :style="size">
      <div id="watertitle">水环境实时监测数据{{tt | formaDate}}</div>
      <div id="waterpull">
        <div class="nullsmwater"></div>
        <div id="waterclass">
          <div class="classname"><font color="#E1F0FB">水质等级</font></div>
          <div class="classimg"><img v-bind:src="wrclassimgs[wrclass]"/></div>
        </div>
        <div class="nullwaterclass"></div>
        <div class="nullsmwater"></div>
        <div class="smwater"><Waternum  :wname="wnumname[0]" :wnum="wnums[0]"></Waternum></div>
        <div class="nullsmwater"></div>
        <div class="smwater"><Waternum  :wname="wnumname[1]" :wnum="wnums[1]"></Waternum></div>
        <div class="nullsmwater"></div>
        <div class="nullsmwater"></div>
        <div class="smwater"><Waternum  :wname="wnumname[2]" :wnum="wnums[2]"></Waternum></div>
        <div class="nullsmwater"></div>
        <div class="smwater"><Waternum  :wname="wnumname[3]" :wnum="wnums[3]"></Waternum></div>
        <div class="nullsmwater"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import Waternum from '../smallcomponents/waternum'
  export default {
    name: 'water',
    components: {
      Waternum
    },
    data () {
      return {
        tt: '',
        url: this.baseConfig.baseUrl + '/get_FXJsonBySql',
        ttimg: require('../img/b.png'),
        ccimg: require('../img/c.png'),
        aaimg: require('../img/a.png'),
        ddimg: require('../img/d.png'),
        wrclass: 0,
        waterclass: '正常',
        wrclassimgs: [require('../img/level_1.png'), require('../img/level_2.png'), require('../img/level_3.png'), require('../img/level_4.png'), require('../img/level_5.png'), require('../img/level_6.png')],
        xml: {'sqldata': 'realwater', 'parameters': []},
        wnums: ['1', '2', '3', '4'],
        wnumname: [require('../img/cod1.png'), require('../img/NH3.png'), require('../img/TP1.png'), require('../img/TN4.png')],
        codNum: '30',
        nd: '12',
        sz: '44',
        aa: '3',
        size: {
          width: '100%',
          height: '100%'
        }
      }
    },
    mounted () {
      // this.timer = setInterval(this.getData, 1000)
      // this.getData()
    },
    created () {
      this.getData()
    },
    filters: {
      formaDate: function (value) {
        if (value !== '') {
          return '(' + value + '）'
        }
      }
    },
    methods: {
      getData () {
        var fileData = new FormData()
        fileData.append('jsonstr', JSON.stringify(this.xml))
        this.axios.post(this.url, fileData).then(response => {
          const data = response.data[0]
          this.wrclass = parseInt(data.L)
          this.$set(this.wnums, 0, data.W01018)
          this.$set(this.wnums, 1, data.W21003)
          this.$set(this.wnums, 2, data.W21011)
          this.$set(this.wnums, 3, data.W21017)
          this.tt = data.MONITORINGTIME
          // this.wnums[0] = data.W01018
          // this.wnums[1] = data.W21003
          // this.wnums[2] = data.W21011
          // this.wnums[3] = data.W21017
        })
      }
    },
    destroyed () {
      clearTimeout(this.timer)
    }
  }
</script>
<style scoped>
  #watermain{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
  }
  #watertitle{
    width: 100%;
    height: 10%;
    font-size: 16px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #waterpull{
    width:100%;
    height: 90%;
    display: flex;
    justify-content: space-around;;
    align-items: center;
    flex-wrap: wrap;
  }
  #waterclass{
    width:35%;
    height: 30%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #7ECEF4;
  }
  #waterpull .smwater{
    width:35%;
    height: 30%;
  }
  #waterpull .nullsmwater{
    width:8%;
    height:30%;
  }
  .nullwaterclass{
    width:55%;
    height:30%;
  }
  .titleimg{
    height: 100%;
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .classname{
    height: 100%;
    width: 70%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
  }
  .classimg{
    height: 100%;
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .titleimg img{
    height: 80%;
    width: auto;
  }
  .classimg img{
    height: 80%;
    width: auto;
  }
</style>
